<template>
	<view class="baseinfo">
		<view class="continer" :class="{ 'no-check': data.baseInfo.checkStatus !== 1 }">
			<u-row>
				<u-col span="10">
					<view class="title">{{ data.baseInfo.invoiceInfo ? data.baseInfo.invoiceInfo.split('/')[0] : '无' }}</view>
					<view class="title">{{ data.baseInfo.invoiceInfo ? data.baseInfo.invoiceInfo.split('/')[1] : '无' }}</view>
				</u-col>
				<u-col span="2">
					<image src="/static/img/yz_logo.png" mode="widthFix" class="logo" />
				</u-col>
			</u-row>
			<u-row class="mt20">
				<u-col span="6">
					<text style="font-weight: 600">报价单号：</text>
					{{ data.baseInfo.quotationNumber ? data.baseInfo.quotationNumber : '--' }}
				</u-col>
				<u-col span="6" class="text-right">
					<text style="font-weight: 600">报价日期：</text>
					{{ data.baseInfo.quotationDate ? data.baseInfo.quotationDate : '--' }}
				</u-col>
			</u-row>

			<view class="table-info mt10">
				<u-row>
					<u-col span="2">
						<view class="cell">
							<text class="inner text-right" style="height: 81px; line-height: 81px">至：</text>
						</view>
					</u-col>
					<u-col span="10">
						<view class="cell" style="height: 83px">
							<text class="inner">{{ data.baseInfo.customerName ? data.baseInfo.customerName : '无客户' }}</text>
							<text class="inner">{{ data.baseInfo.customerInfo ? data.baseInfo.customerInfo : '--&nbsp;' }}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="2">
						<view class="cell">
							<text class="inner text-right">部署：</text>
						</view>
					</u-col>
					<u-col span="8">
						<view class="cell">
							<text class="inner">{{ data.baseInfo.quotationItemName ? data.baseInfo.quotationItemName : '--&nbsp;' }}</text>
						</view>
					</u-col>
					<u-col span="2">
						<view class="cell">
							<text class="inner">有效期：{{ data.baseInfo.validPeriod ? data.baseInfo.validPeriod : '--&nbsp;' }}天</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="2">
						<view class="cell">
							<text class="inner text-right">摘要：</text>
						</view>
					</u-col>
					<u-col span="10">
						<view class="cell">
							<text class="inner">{{ data.baseInfo.summary ? data.baseInfo.summary : '--&nbsp;' }}</text>
						</view>
					</u-col>
				</u-row>
				<u-row>
					<u-col span="2">
						<view class="cell">
							<text class="inner text-right">发件人：</text>
						</view>
					</u-col>
					<u-col span="10">
						<view class="cell">
							<text class="inner">{{ data.baseInfo.senderInfo ? data.baseInfo.senderInfo : '--&nbsp;' }}</text>
						</view>
					</u-col>
				</u-row>
			</view>

			<template v-for="(item, index) in data.listData">
				<view class="sub-title mt10" :key="'sub-title-' + index">第{{ index + 1 }}部分：{{ item.itemOption }}</view>
				<view class="table mt10" :key="'table-' + index">
					<u-row class="mt10" :key="'table-hd' + index">
						<u-col>
							<view class="cell">
								<text class="inner">序号</text>
							</view>
						</u-col>
						<u-col v-for="(head, headIndex) in headList" :key="headIndex" :style="{ width: head.width + 'px' }">
							<view class="cell">
								<text class="inner">{{ head.name }}</text>
							</view>
						</u-col>
					</u-row>
					<u-row v-for="(product, productIndex) in item.productList" :key="productIndex" :class="{ 'warning-show': Number(product.productPrice) < Number(product.directorPrice) }">
						<u-col>
							<view class="cell">
								<text class="inner">{{ productIndex + 1 }}</text>
							</view>
						</u-col>
						<u-col v-for="(head, headIndex) in headList" :key="headIndex">
							<view class="cell">
								<text class="inner">{{ product[head.fieldName] }}</text>
							</view>
						</u-col>
					</u-row>
					<u-row :key="'total-' + index" :class="{ 'warning-show': Number(item.rate) < 13 }">
						<td :colspan="headList.length - 2">以上价格含{{ item.rate }}%增值税</td>
						<td>小计：</td>
						<td>{{ item.subtotal }}</td>
						<td>元</td>
					</u-row>
				</view>
			</template>
			<view class="text-right">总计：{{ data.baseInfo.finalSalesPriceTax }} 元</view>
			<view>项目备注：{{ data.baseInfo.remark }}</view>
		</view>
	</view>
</template>

<script>
export default {
	name: 'baseinfo',
	props: {
		data: {
			type: Object,
			default: () => {},
		},
		headList: {
			type: Array,
			default: () => [],
		},
	},
	data() {
		return {};
	},
	computed: {},
	methods: {},
};
</script>

<style lang="scss" scoped>
.baseinfo {
	height: 500px;
	overflow: auto;
}
.no-check {
	background: url('../../../../static/crm/quotation_no_check.png') repeat;
}
.continer {
	width: 840px;
	min-height: 500px;

	.title {
		font-size: 20px;
		text-align: center;
	}

	.sub-title {
		font-weight: bold;
	}

	.logo {
		width: 130px;
	}

	.mt10 {
		margin-top: 10px;
	}

	.mt20 {
		margin-top: 20px;
	}

	.table {
		display: table;
		width: 100%;
		border-collapse: collapse;
		/deep/ {
			.u-row {
				display: table-row;

				.u-col {
					display: table-cell;
					width: 50px;
					padding: 5px 10px !important;
					border: 1px solid #666;
					vertical-align: middle;
				}
			}
		}
		td {
			padding: 5px 10px !important;
			border: 1px solid #666;
		}
		.warning-show {
			background-color: orange;
		}
	}

	.table-info /deep/ {
		.u-row {
			width: 100%;
			justify-content: center !important;
			align-items: stretch !important;
		}
		.u-col {
			justify-content: center !important;
			border-left: 1px solid #666;
			border-top: 1px solid #666;
			padding: 0 !important;
			.cell {
				border: 1px solid #666;
				margin: -1px;
				.inner {
					display: block;
					padding: 5px 10px;
					min-height: 31px;
				}
			}
		}
	}
}
</style>